<template>
	<view class="profile-container">
		<!-- 用户信息区域 -->
		<view class="user-info" @click="checkLogin">
			<view class="avatar">
				<image :src="userInfo.avatar || '/static/default-avatar.png'" class="avatar-img" />
			</view>
			<view class="user-detail">
				<text class="username">{{ userInfo.username || '未登录' }}</text>
				<text class="user-desc" v-if="userInfo.isLogin">点击查看个人资料</text>
				<text class="user-desc" v-else>点击登录账号</text>
			</view>
			<uni-icons type="forward" size="20" color="#999"></uni-icons>
		</view>

		<!-- 功能列表 -->
		<view class="function-list" v-if="userInfo.isLogin">
			<view class="function-item">
				<uni-icons type="heart" size="24" color="#ff6b6b"></uni-icons>
				<text class="function-text">我的收藏</text>
				<uni-icons type="forward" size="18" color="#999"></uni-icons>
			</view>

			<view class="function-item">
				<uni-icons type="eye" size="24" color="#51a7f9"></uni-icons>
				<text class="function-text">浏览历史</text>
				<uni-icons type="forward" size="18" color="#999"></uni-icons>
			</view>

			<view class="function-item">
				<uni-icons type="chat" size="24" color="#6bc04b"></uni-icons>
				<text class="function-text">我的评论</text>
				<uni-icons type="forward" size="18" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 登录按钮 -->
		<view class="login-section" v-if="!userInfo.isLogin">
			<button class="login-prompt-btn" @click="goToLogin">立即登录，体验更多功能</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					isLogin: false,
					username: '',
					avatar: ''
				}
			}
		},

		onLoad() {
			this.checkLoginStatus()
		},

		onShow() {
			this.checkLoginStatus()
		},

		methods: {
			checkLoginStatus() {
				// 从本地存储获取登录状态
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo && userInfo.isLogin) {
					this.userInfo = userInfo
					// 确保底部导航栏文字正确
					uni.setTabBarItem({
						index: 3,
						text: '我的'
					})
				} else {
					this.userInfo = {
						isLogin: false,
						username: '',
						avatar: ''
					}
					// 设置底部导航栏为未登录状态
					uni.setTabBarItem({
						index: 3,
						text: '未登录'
					})
				}
			},

			checkLogin() {
				if (!this.userInfo.isLogin) {
					this.goToLogin()
				}
			},

			goToLogin() {
				uni.navigateTo({
					url: '/pages/News/login/login'
				})
			}
		}
	}
</script>

<style scoped>
	.profile-container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.user-info {
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #ffffff;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 30rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.3);
	}

	.avatar-img {
		width: 100%;
		height: 100%;
	}

	.user-detail {
		flex: 1;
	}

	.username {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.user-desc {
		font-size: 24rpx;
		opacity: 0.8;
	}

	.function-list {
		background: #ffffff;
		margin: 20rpx;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.function-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.function-item:last-child {
		border-bottom: none;
	}

	.function-text {
		flex: 1;
		font-size: 32rpx;
		margin-left: 20rpx;
		color: #333333;
	}

	.login-section {
		padding: 40rpx 30rpx;
	}

	.login-prompt-btn {
		background: #007AFF;
		color: #ffffff;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
		font-size: 32rpx;
	}
</style>